<template>
  <!-- 基础饼图 -->
  <div ref="chartEl" :style="stylesConfig" v-resize="resizeHandler" class="compo-public-style"></div>
</template>

<script setup>
import { computed } from 'vue';

import { useChartComponentData } from '@/hooks/use-chart-component-data';

const props = defineProps({
  value: {
      type: Object,
      default: () => { }
  },
  preview: {
      type: Boolean,
      default: () => false
  }
});

// 样式配置
const stylesConfig = computed(() => {
  return {
      width: `${styles.value?.w / 100}rem`,
      height: `${styles.value?.h / 100}rem`,
      position: preview.value ? 'absolute' : 'static',
      left: `${styles.value?.x}px`,
      top: `${styles.value?.y}px`,
      borderRadius: `${styles.value.leftTop / 100}rem ${styles.value.rightTop / 100
          }rem ${styles.value.rightBottom / 100}rem ${styles.value.leftBottom / 100
          }rem`
  };
});

const mockData = {
  legend: {
      show: true //是否展示图例
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]

};
//图形类型配置
const chartTypeConfig = {
  type: 'pie'
};
const { styles, preview, chartEl, resizeHandler } = useChartComponentData(
  props,
  mockData,
  chartTypeConfig
);
</script>
<style scoped lang="scss"></style>
